<template>
  <div
    class="content-wrapper"
    v-loading.fullscreen.lock="fullscreenLoading"
    :before-close="handleClose"
  >
    <el-row class="content-row">
      <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="100px">
        <el-row>
          <el-col :span="20">
    
            <el-form-item label="播出时间" prop="showTime">
                <el-input v-model="addForm.showTime" readonly />
            </el-form-item>

            <el-form-item label="栏目名称" prop="menuName">
              <el-input v-model="addForm.menuName" readonly />
            </el-form-item>

            <el-form-item label="节目主题" prop="showTopic">
              <el-input v-model="addForm.showTopic" maxlength="20" placeholder="建议13字以内，但不超过20个中文字"/>
            </el-form-item>

            <el-form-item label="节目副标题" prop="showTitle">
              <el-input v-model="addForm.showTitle" maxlength="20" placeholder="建议13字以内，但不超过20个中文字"/>
            </el-form-item>

            <el-form-item label="节目主持1" prop="hostOneId">
              <el-select v-if="hosts" v-model="addForm.hostOneId" filterable clearable placeholder='请选择主持人' >
                    <el-option
                        v-for="item in hosts"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
              <!-- <el-input v-model="addForm.hostOne" /> -->
            </el-form-item>

            <el-form-item label="节目主持2" prop="hostTwoId">
              <el-select v-if="hosts" v-model="addForm.hostTwoId" filterable clearable placeholder='请选择主持人' >
                    <el-option
                        v-for="item in hosts"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="首页大图" prop="bigImage">
              <el-upload
                :action="uploadUrl"
                list-type="picture-card"
                :class="{disabled:uploadNumPro==1}"
                :limit="limit"
                :on-preview="handlePreviewAvatarUpload"
                :on-success="successAvatarUpload"
                :before-upload="beforeSingleAvatarUpload"
                :on-remove="handleRemoveAvatarUpload"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="isPreview" size="tiny" append-to-body>
                <img width="100%" :src="previewUrl" alt />
              </el-dialog>
              <div>图片建议尺寸:186x102像素,大小&lt;=2M</div>
            </el-form-item>

            <el-form-item label="听精彩小图" prop="smallImage">
              <el-upload
                :action="uploadUrl"
                list-type="picture-card"
                :class="{disabled:uploadNumPro2==1}"
                :limit="limit"
                :on-preview="handlePreviewAvatarUpload2"
                :on-success="successAvatarUpload2"
                :before-upload="beforeSingleAvatarUpload"
                :on-remove="handleRemoveAvatarUpload2"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="isPreview2" size="tiny" append-to-body>
                <img width="100%" :src="previewUrl2" alt />
              </el-dialog>
              <div>图片建议尺寸:165x112像素,大小&lt;=2M</div>
            </el-form-item>


          </el-col>
        </el-row>
      </el-form>
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="closeTab">取 消</el-button>
      <el-button type="primary" @click="saveForm('addForm',1)">保存</el-button>
      <!-- <el-button type="primary" @click="saveForm('addForm',3)">发布</el-button> -->
    </div>

    <!-- <city-tree v-if="treeDialog" @handleclose="viewinf" /> -->
  </div>
</template>

<script>
// import CityTree from "../../../common/CityTree";
// import { addSubject } from "../../api/bbs/subject";
import { getHostListByMenuId } from "../../../api/media/hostList";
import { addNewList } from "../../../api/media/newList";

export default {
  name: "mediaNewAdd",
  props:{
    mediaNew:{
      type: Object,
      required: true
    }
  },
  data() {
    return {
      hosts:[],
      treeDialog: false,
      positions: {},
      fullscreenLoading: false,
      uploadUrl: "https://lht.ah-zk.com/qjt/fs/file/upload",
      origin: "https://lht.ah-zk.com/qjt/fs/origin",
      previewUrl: "",
      isPreview: false,
      uploadNumPro: 0,
      previewUrl2: "",
      isPreview2: false,
      uploadNumPro2: 0,

      limit: 1,
      picList: [],
      addForm: {
        bigImage: ''
        ,liveUrl: ''
        ,menuBeginTime: ''
        ,menuEndTime: ''
        ,menuId: ''
        ,menuName: ''
        ,showBeginTime: ''
        ,showDate: ''
        ,showEndTime: ''
        ,showName: ''
        ,showTopic: ''
        ,showTitle: ''
        ,smallImage: ''
        ,showTime: ''
        ,hostTwo:{}
        ,hostOne:{}
        ,hostTwoId:''
        ,hostOneId:''
      },
      addRules: {
        showTime: [
          {
            required: true,
            message: "请确定播出时间",
            trigger: ["blur", "change"]
          }
        ],
        menuName: [
          {
            required: true,
            message: "请确认节目栏目名称",
            trigger: ["blur", "change"]
          }
        ],
        showTopic: [
          {
            required: true,
            message: "请输入节目主题",
            trigger: ["blur", "change"]
          }
        ],
        showTitle: [
          {
            required: true,
            message: "请输入节目副标题",
            trigger: ["blur", "change"]
          }
        ],
        hostOneId: [
          {
            required: true,
            message: "请选择节目主持1",
            trigger: ["blur", "change"]
          }
        ],
        bigImage: [
          {
            required: true,
            message: "请上传首页大图",
            trigger: ["blur", "change"]
          }
        ],
        smallImage: [
          {
            required: true,
            message: "请上传听精彩小图",
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  created() {
    console.log("created===>",'我进来了',this.mediaNew)
    Object.assign(this.addForm,this.mediaNew);
    let dateStr = this.renderTimeNoTime(this.addForm.showDate);
    let beginTimeStr = dateStr.concat(' ',this.addForm.menuBeginTime,':00');
    let endTimeStr = dateStr.concat(' ',this.addForm.menuEndTime,':00');
    this.addForm.showTime = beginTimeStr.concat('~',this.addForm.menuEndTime,':00');
    this.addForm.showDateStr = dateStr;
    console.log("showDateStr===>",dateStr,beginTimeStr,endTimeStr);
    // this.enumMap('SubjectEnum.PositionEnum','com.zlll.winner.enums.bbs').then(res=>{if(res) this.positions = res });
    let that = this;
    getHostListByMenuId({menuId:that.addForm.menuId}).then(res=>{
      if(res.code == '0'){
        that.hosts = res.data;
        console.log("getHostListByMenuId===>",that.hosts )
      }
    })
  },
  components: {
    // CityTree
  },
  methods: {
    handlePreviewAvatarUpload2(file) {
      console.log("handlePreviewAvatarUpload===>", file);
      this.previewUrl2 = file.url;
      this.isPreview2 = !this.isPreview;
    },
    successAvatarUpload2(res, file) {
      let image = res.files[0];
      let imageUrl = this.origin.concat("/", image.fingerprint);
      this.previewUrl = imageUrl;
      this.addForm.smallImage = image.fingerprint;
      this.uploadNumPro2 = 1;
      console.log("uploadNumPro===>", this.uploadNumPro);
    },
    handleRemoveAvatarUpload2(file, fileList) {
      this.uploadNumPro2 = 0;
      console.log("uploadNumPro===>", this.uploadNumPro2);
    },

    handlePreviewAvatarUpload(file) {
      console.log("handlePreviewAvatarUpload===>", file);
      this.previewUrl = file.url;
      this.isPreview = !this.isPreview;
    },
    successAvatarUpload(res, file) {
      let image = res.files[0];
      let imageUrl = this.origin.concat("/", image.fingerprint);
      this.previewUrl = imageUrl;
      this.addForm.bigImage = image.fingerprint;
      this.uploadNumPro = 1;
      console.log("uploadNumPro===>", this.uploadNumPro);
    },
    handleRemoveAvatarUpload(file, fileList) {
      this.uploadNumPro = 0;
      console.log("uploadNumPro===>", this.uploadNumPro);
    },
    closeTab() {
      this.$emit("handleClose");
    },
    viewCity() {
      this.treeDialog = !this.treeDialog;
    },
    viewinf(e) {
      this.treeDialog = !this.treeDialog;
      console.log("viewinf==>", e);
      this.addForm.cityList = e;
      this.addForm.cityName = e
        .map(item => {
          return item.cityName;
        })
        .join(",");
    },
    saveForm(formName, status) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.fullscreenLoading = true;
          // this.addForm.beginTime = new Date(this.addForm.time[0]).getTime();
          // this.addForm.endTime = new Date(this.addForm.time[1]).getTime();
          this.addForm.status = status;
          this.addForm.hostOne = this.hosts.filter(item=>{if(item.id === this.addForm.hostOneId) return item})[0];
          this.addForm.hostTwo = this.hosts.filter(item=>{if(item.id === this.addForm.hostTwoId) return item})[0];
          addNewList(this.addForm).then(res => {
            if (res.code == "0") {
              this.fullscreenLoading = false;
              this.$message({ message: "新增成功", type: "success" });
              this.resetForm("addForm");
              this.$emit("saveClose");
            } else {
              this.fullscreenLoading = false;
              this.$message({ message: res.data.msg, type: "error" });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.content-wrapper {
  height: 100%;
  overflow-y: scroll;
}

.content-row {
  height: 94%;
  overflow-y: scroll;
}

.imageFloatLeft {
  width: 40%;
  float: left;
  height: 140px;
  margin-right: 2%;
}

.dialog-footer {
  text-align: center;
}
</style>
